上一篇有講到網頁三兄弟，其中有一個老大哥負責撐起這個世界，那就是 HTML ，少了 HTML 這個根基，就不會有網頁。
只有 HTML 的世界是非常無聊的，這時 CSS 和 Javascript 接連出現，為網頁世界創造更多的可能！
HTML 是 Hyper Text Markup Language 的縮寫，中文翻譯為超文本標示語言，是樣板語言。
什麼是樣板語言？ 主要給樣板處理器（瀏覽器）產生畫面的語言
HTML 的世界是由上往下建構的，最後會變成一個 DOM tree 樹狀圖。
什麼是 DOM？ DOM 是 Document Object Model 的縮寫，中文翻譯為文件物件模型
轉換成 樹狀圖架構
en 為英文，zh-TW 為繁體中文。<meta>是給瀏覽器看的設定值，如：字元編碼、RWD、網頁 icon 、網頁描述...等。<title>是給網頁的標題。<link>是用來引入 CSS 的。<script>用來引入 Javascript 使用的，但大多數人會設在網頁尾端，之後再講為什麼。<body>子元素為<h1>、<h1>父元素為<body>。
</h1>
最原始的 HTML 是沒有所謂的區塊元素，而是各家的瀏覽器自己設定預設的樣式，讓 HTML 更加容易閱讀。
如圖 <h1> Google Chrome 內建樣式
雖然各家瀏覽器的樣式都不太一樣，但整體大方向還是一樣的，都有區分出區塊元素與行內元素。
多數情況下，會用區塊元素劃分位置，行內元素會放在區塊元素內。
div、h1、ul...等。span、img、input...等。
為了更好的呈現效果，所以有稍微添加一些 CSS
現在已經初步認識網頁的架構了，明天將會深入了解各個標籤的用法與注意事項。
如果想自己做出樹狀圖，可以玩玩看，只是是用 Codepen 做的有點亂。
iThome鐵人賽
看影片追技術